/**
 *  Copyright Kirk Technologies.
 */

import * as React from "react";
import {
    Edit,
    TabbedForm,
    FormTab,
    TextInput,
    DateInput,
    LongTextInput,
    ReferenceManyField,
    Datagrid,
    DateField,
    TextField,
    NumberField,
    EditButton,
    NullableBooleanInput,
} from "react-admin";
import withStyles from "@material-ui/core/styles/withStyles";
import { FullNameField } from "./FullNameField";
import { NbItemsField } from "../commands/NbItemsField";
import { ProductReferenceField } from "../products/ProductReferenceField";
import { StarRatingField } from "../reviews/StarRatingField";
import { SegmentsInput } from "./SegmentsInput";

const Title = ({ record }: any) => (record ? <FullNameField record={record} size={32} /> : null);

const editStyles: any = {
    first_name: { display: "inline-block" },
    last_name: { display: "inline-block", marginLeft: 32 },
    email: { width: 544 },
    address: { maxWidth: 544 },
    zipcode: { display: "inline-block" },
    city: { display: "inline-block", marginLeft: 32 },
    comment: {
        maxWidth: "20em",
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
    },
};

export const CustomerEdit = withStyles(editStyles)(({ classes, ...props }) => (
    <Edit title={<Title />} {...props}>
        <TabbedForm>
            <FormTab label="resources.customers.tabs.identity">
                <TextInput source="first_name" formClassName={classes.first_name} />
                <TextInput source="last_name" formClassName={classes.last_name} />
                <TextInput
                    type="email"
                    source="email"
                    validation={{ email: true }}
                    fullWidth={true}
                    formClassName={classes.email}
                />
                <DateInput source="birthday" />
            </FormTab>
            <FormTab label="resources.customers.tabs.address">
                <LongTextInput source="address" formClassName={classes.address} />
                <TextInput source="zipcode" formClassName={classes.zipcode} />
                <TextInput source="city" formClassName={classes.city} />
            </FormTab>
            <FormTab label="resources.customers.tabs.orders">
                <ReferenceManyField addLabel={false} reference="commands" target="customer_id">
                    <Datagrid>
                        <DateField source="date" />
                        <TextField source="reference" />
                        <NbItemsField />
                        <NumberField source="total" options={{ style: "currency", currency: "USD" }} />
                        <TextField source="status" />
                        <EditButton />
                    </Datagrid>
                </ReferenceManyField>
            </FormTab>
            <FormTab label="resources.customers.tabs.reviews">
                <ReferenceManyField addLabel={false} reference="reviews" target="customer_id">
                    <Datagrid filter={{ status: "approved" }}>
                        <DateField source="date" />
                        <ProductReferenceField />
                        <StarRatingField />
                        <TextField source="comment" cellClassName={classes.comment} />
                        <EditButton style={{ padding: 0 }} />
                    </Datagrid>
                </ReferenceManyField>
            </FormTab>
            <FormTab label="resources.customers.tabs.stats">
                <SegmentsInput />
                <NullableBooleanInput source="has_newsletter" />
                <DateField source="first_seen" style={{ width: 128, display: "inline-block" }} />
                <DateField source="latest_purchase" style={{ width: 128, display: "inline-block" }} />
                <DateField source="last_seen" style={{ width: 128, display: "inline-block" }} />
            </FormTab>
        </TabbedForm>
    </Edit>
));
